<template>
  <div class="mains">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">传感器数据</div>
    </nav-bar>

    <div class="charts">
      <!--空气温度传感器-->
      <div :class="temp1?'':'hidden'" id="temperature" style="height: 271px;width: 100%;background: white;border-radius: 6px;">

      </div>
      <!--空气温度传感器-->
      <!--空气湿度传感器-->
      <div :class="temp2?'':'hidden'" id="wet"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--空气湿度传感器-->
      <!--PM2.5传感器-->
      <div :class="temp3?'':'hidden'" id="pm" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--PM2.5传感器-->
      <!--风速传感器-->
      <div :class="temp4?'':'hidden'" id="cloud"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--风速传感器-->

      <!--风向传感器-->
      <div :class="temp5?'':'hidden'" id="direction"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--风向传感器-->
      <!--土壤湿度传感器-->
      <div :class="temp6?'':'hidden'" id="soil"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--土壤湿度传感器-->
      <!--光照传感器-->
      <div :class="temp7?'':'hidden'" id="light"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--光照传感器-->

      <div v-if="!temp1 && !temp2 && !temp3 && !temp4 && !temp5 && !temp6 && !temp7" class="video_box">
        <p class="textfz">这一天暂无数据，请选择其他日期</p>
      </div>

    </div>
  </div>
</template>

<script>
    import echarts from 'echarts'
    import noData from "@/components/content/nodata";
    import NavBar from "@/components/common/navbar/NavBar"
    export default {
        name: "NewsSensorDetial",
        data() {
          return {
            bid: '',
            sid: '',
            date: '',
            option1: {
              title: {
                text: '空气温度传感器',
                left: "35%",
                top: "2%",
                textStyle: {
                  fontSize: 16,
                  color: "#353a41",
                  fontFamily: "黑体",
                },
              },

              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                type: 'category',
                boundaryGap: true,
                data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#9fa7b3',
                },

              },
              yAxis: {
                name: '°C',
                nameTextStyle: {
                  color: "#9fa7b3",
                  align: "right"
                },
                min: -10,
                max: 40,
                axisLine: {
                  show: false
                },
                type: 'value',
                axisTick: {
                  show: false
                },

                axisLabel: {
                  formatter: '{value}',
                  color: '#9fa7b3',
                },
              },
              series: [
                {
                  name: '空气温度传感器',
                  type: 'line',
                  // symbol: "diamond",
                  symbolSize: 8,
                  label: {
                    show: true,
                    color: "#9fa7b3",
                    formatter: '{c}°C'
                  },
                  data: [20, 21, 30, 29, 21],
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#4cdbbd",
                      lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#93e3da'
                        },
                          {
                            offset: 0.9,
                            color: '#2cc197'
                          }]),
                        width: 3
                      }
                    }
                  },

                }

              ]
            },//echarts温度传感器图表配置项
            option2: {
              title: {
                text: '空气湿度传感器',
                left: "35%",
                top: "2%",
                textStyle: {
                  fontSize: 16,
                  color: "#353a41",
                  fontFamily: "黑体",
                },
              },

              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                type: 'category',
                boundaryGap: true,
                data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#9fa7b3',
                },

              },
              yAxis: {
                name: '%',
                nameTextStyle: {
                  color: "#9fa7b3",
                  align: "right"
                },
                axisLine: {
                  show: false
                },
                type: 'value',
                axisTick: {
                  show: false
                },

                min: 0,
                max: 100,

                axisLabel: {
                  formatter: '{value}',
                  color: '#9fa7b3',
                },
              },
              series: [
                {
                  name: '空气湿度传感器',
                  type: 'line',
                  // symbol: "diamond",
                  symbolSize: 8,
                  label: {
                    show: true,
                    color: "#9fa7b3",
                    formatter: '{c}%'
                  },
                  data: [20, 60, 30, 29, 80],
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#2381fd",//实心圆圈颜色
                      lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#8db7ed'
                        },
                          {
                            offset: 0.9,
                            color: '#2381fd'
                          }]),
                        width: 3
                      }
                    }
                  },

                }

              ]
            },//echarts空气湿度传感器图表配置项
            option3: {
              title: {
                text: 'PM2.5传感器',
                left: "35%",
                top: "2%",
                textStyle: {
                  fontSize: 16,
                  color: "#353a41",
                  fontFamily: "黑体",
                },
              },

              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                type: 'category',
                boundaryGap: true,
                data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#9fa7b3',
                },

              },
              yAxis: {
                name: '',
                nameTextStyle: {
                  color: "#9fa7b3",
                  // align: "right"
                },
                axisLine: {
                  show: false
                },
                type: 'value',
                axisTick: {
                  show: false
                },
                // min: 0,
                //max: 300,

                axisLabel: {
                  formatter: '{value}',
                  color: '#9fa7b3',
                },
              },
              series: [
                {
                  name: 'PM2.5传感器',
                  type: 'line',
                  // symbol: "diamond",
                  symbolSize: 8,
                  label: {
                    show: true,
                    color: "#9fa7b3",
                    formatter: '{c}'
                  },
                  data: [200, 66, 300, 90, 21],
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#fc656c",
                      lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#e8b9be'
                        },
                          {
                            offset: 0.9,
                            color: '#fc656c'
                          }]),
                        width: 3
                      }
                    }
                  },

                }

              ]
            },//echartsPM2.5传感器器图表配置项
            option4: {
              title: {
                text: '风速传感器',
                left: "35%",
                top: "2%",
                textStyle: {
                  fontSize: 16,
                  color: "#353a41",
                  fontFamily: "黑体",
                },
              },

              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                type: 'category',
                boundaryGap: true,
                data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#9fa7b3',
                },

              },
              yAxis: {
                name: 'km/h',
                nameTextStyle: {
                  color: "#9fa7b3"
                },
                axisLine: {
                  show: false
                },
                type: 'value',
                axisTick: {
                  show: false
                },

                // min: 0,
                //  max: 200,
                axisLabel: {
                  formatter: '{value}',
                  color: '#9fa7b3',
                },
              },
              series: [
                {
                  name: '风速传感器',
                  type: 'line',
                  // symbol: "diamond",
                  symbolSize: 8,
                  label: {
                    show: true,
                    color: "#9fa7b3",
                    formatter: '{c}km/h'
                  },
                  data: [50, 150, 120, 20, 130],
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#8161e6",
                      lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#c2b7f3'
                        },
                          {
                            offset: 0.9,
                            color: '#8161e6'
                          }]),
                        width: 3
                      }
                    }
                  },

                }

              ]
            },//echarts风速传感器图表配置项
            option5: {
              title: {
                text: '风向传感器',
                left: "35%",
                top: "2%",
                textStyle: {
                  fontSize: 16,
                  color: "#353a41",
                  fontFamily: "黑体",
                },
              },

              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                type: 'category',
                boundaryGap: true,
                data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#9fa7b3',
                },

              },
              yAxis: {
                axisLine: {
                  show: false
                },
                type: 'value',
                axisTick: {
                  show: false
                },

                //  min: 1,
                //  max: 8,
                axisLabel: {
                  formatter: '风向{value}',
                  color: '#9fa7b3',
                },
              },
              series: [
                {
                  name: '风向传感器',
                  type: 'line',
                  // symbol: "diamond",
                  symbolSize: 8,
                  label: {
                    show: true,
                    color: "#9fa7b3",
                    formatter: '{b}风'
                  },
                  data: [
                    {value: 1, name: '北'},
                    {value: 6, name: '西南'},
                    {value: 3, name: '东'},
                    {value: 7, name: '西'},
                    {value: 3, name: '东'},
                  ],
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#e8692f",
                      lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#e6b39d'
                        },
                          {
                            offset: 0.9,
                            color: '#e8692f'
                          }]),
                        width: 3
                      }
                    }
                  },

                }

              ]
            },//echarts风向传感器图表配置项
            option6: {
              title: {
                text: '土壤湿度传感器',
                left: "35%",
                top: "2%",
                textStyle: {
                  fontSize: 16,
                  color: "#353a41",
                  fontFamily: "黑体",
                },
              },

              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                type: 'category',
                boundaryGap: true,
                data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#9fa7b3',
                },

              },
              yAxis: {
                name: '%',
                nameTextStyle: {
                  color: "#9fa7b3",
                  align: "right"
                },

                axisLine: {
                  show: false
                },
                type: 'value',
                axisTick: {
                  show: false
                },
                min: 0,
                max: 100,
                axisLabel: {
                  formatter: '{value}',
                  color: '#9fa7b3',
                },
              },
              series: [
                {
                  name: '土壤湿度传感器',
                  type: 'line',
                  // symbol: "diamond",
                  symbolSize: 8,
                  label: {
                    show: true,
                    color: "#9fa7b3",
                    formatter: '{c}%'
                  },
                  data: [20, 60, 30, 29, 80],
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#e4afcf",//实心圆圈颜色
                      lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#e72f8c'
                        },
                          {
                            offset: 0.9,
                            color: '#2381fd'
                          }]),
                        width: 3
                      }
                    }
                  },

                }

              ]
            },//echarts土壤湿度传感器图表配置项
            option7: {
              title: {
                text: '光照传感器',
                left: "35%",
                top: "2%",
                textStyle: {
                  fontSize: 16,
                  color: "#353a41",
                  fontFamily: "黑体",
                },
              },

              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                axisLine: {
                  show: false
                },
                type: 'category',
                boundaryGap: true,
                data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#9fa7b3',
                },

              },
              yAxis: {
                name: 'Lux',
                nameTextStyle: {
                  color: "#9fa7b3"
                },
                axisLine: {
                  show: false
                },
                type: 'value',
                axisTick: {
                  show: false
                },
                //  min: 0,
                //   max: 100,
                axisLabel: {
                  formatter: '{value}',
                  color: '#9fa7b3',
                },
              },
              series: [
                {
                  name: '光照传感器',
                  type: 'line',
                  // symbol: "diamond",
                  symbolSize: 8,
                  label: {
                    show: true,
                    color: "#9fa7b3",
                    formatter: '{c}Lux'
                  },
                  data: [20, 59, 80, 29, 21],
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#c67d54",
                      lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#e2d0c7'
                        },
                          {
                            offset: 0.9,
                            color: '#c67d54'
                          }]),
                        width: 3
                      }
                    }
                  },

                }

              ]
            },//echarts光照传感器图表配置项
            temp1: true,
            temp2: true,
            temp3: true,
            temp4: true,
            temp5: true,
            temp6: true,
            temp7: true,
          }
        },
        components: {
          noData,
          NavBar
        },
        props:{
          sid2:String,
          bid2:String,
          date2:String,
        },
        watch:{
          date2(newValue,orderValue){
            let that = this;
            console.log('newValue',newValue);
            console.log('orderValue',orderValue);
            that.date=newValue;
            that.creatTemperature();
            that.creatWet();
            that.creatPm();
            that.creatCloud();
            that.creatDirection();
            that.creatSoil();
            that.creatLight();
          },
        },


        created() {
         console.log('this.bid2',this.bid2);
         console.log('this.sid2',this.sid2);
         console.log('this.date2',this.date2);
          this.bid = this.bid2;
          this.sid = this.sid2;
          this.date = this.date2;
          // this.bid = this.$route.query.bid;
          // this.sid = this.$route.query.sid;
          // this.date = this.$route.query.date;
        },
        mounted() {
          this.creatTemperature();
          this.creatWet();
          this.creatPm();
          this.creatCloud();
          this.creatDirection();
          this.creatSoil();
          this.creatLight();

        },
        methods: {
          creatTemperature() {
            this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=2", null, r => {
              if (r.data.data.length == 0) {
                this.temp1 = false;
              } else {
                this.temp1 = true;
                // this.option1.series[0].data=r.data.sources;
                // let str = "2020-09-18 14:09:19";
                // console.log("字符串截取为：",str.slice(5,10).replace("-","/"));
                // console.log("温度数据:",r.data);
                let times = [];//日期数组
                let wendus = [];//温度数组
                console.log('当天温度数据:', r);
                r.data.data.forEach(function (v, i) {
                  // console.log('日期：',v.create_date);
                  // console.log('资源：',v.sources);
                  wendus.push(parseFloat(v.sources, 1));
                  times.push(v.create_date.slice(5, 10).replace("-", "/"));
                });
                console.log('温度数据断点！');
                // console.log("times:",times);
                // console.log("wendus:",wendus);
                console.log("this.option1.xAxis.data:", this.option1.xAxis.data);
                console.log("this.option1.series[0].data", this.option1.series[0].data);
                this.option1.xAxis.data = times.splice(-5);
                this.option1.series[0].data = wendus.splice(-5);
                // 3. 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('temperature'));
                myChart.setOption(this.option1);
              }

            });

          },
          creatWet() {
            this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=3", null, r => {
              if (r.data.data.length == 0) {
                this.temp2 = false;
              } else {
                console.log("空气湿度:", r);
                this.temp2 = true;
                let times = [];//日期数组
                let shidus = [];//空气湿度数组
                r.data.data.forEach(function (v, i) {
                  shidus.push(parseInt(parseInt(v.sources)));
                  times.push(v.create_date.slice(5, 10).replace("-", "/"));
                });
                // console.log("times:",times);
                // console.log("shidus:",shidus);
                this.option2.xAxis.data = times.splice(-5);
                this.option2.series[0].data = shidus.splice(-5);
                // 3. 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('wet'))
                myChart.setOption(this.option2);


              }
            });

          },
          creatPm() {
            this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=7", null, r => {
              if (r.data.data.length == 0) {
                this.temp3 = false;
              } else {
                this.temp3 = true;
                console.log('pm2.5:', r);
                let times = [];//日期数组
                let pms = [];//pm2.5数组
                r.data.data.forEach(function (v, i) {
                  pms.push(parseInt(v.sources * 100));
                  times.push(v.create_date.slice(5, 10).replace("-", "/"));
                });
                // console.log("times:",times);
                // console.log("pms:",pms);
                this.option3.xAxis.data = times.splice(-5);
                this.option3.series[0].data = pms.splice(-5);
                // 3. 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('pm'));
                myChart.setOption(this.option3);
              }

            });
          },
          creatCloud() {
            this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=5", null, r => {
              if (r.data.data.length == 0) {
                this.temp4 = false;
              } else {
                this.temp4 = true;
                console.log("风速：", r);
                let times = [];//日期数组
                let fengsus = [];//风速数组
                r.data.data.forEach(function (v, i) {
                  fengsus.push(parseInt(parseInt(v.sources)));
                  times.push(v.create_date.slice(5, 10).replace("-", "/"));
                });
                // console.log("times:",times);
                // console.log("fengsus:",fengsus);
                this.option4.xAxis.data = times.splice(-5);
                ;
                this.option4.series[0].data = fengsus.splice(-5);
                // 3. 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('cloud'))
                myChart.setOption(this.option4);

              }

            });

          },
          creatDirection() {
            this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=4", null, r => {
              if (r.data.data.length == 0) {
                this.temp5 = false;
              } else {
                this.temp5 = true;
                console.log("风向:", r);
                let times = [];//日期数组
                let fengxiangs = [];//风向数组
                r.data.data.forEach(function (v, i) {
                  times.push(v.create_date.slice(5, 10).replace("-", "/"));
                  // fengxiangs.push(parseInt(parseInt(v.sources)));
                  switch (v.sources) {
                    case '1':
                      fengxiangs.push({value: 1, name: '北'});
                      break;
                    case '2':
                      fengxiangs.push({value: 2, name: '东北'});
                      break;
                    case '3':
                      fengxiangs.push({value: 3, name: '东'});
                      break;
                    case '4':
                      fengxiangs.push({value: 4, name: '东南'});
                      break;
                    case '5':
                      fengxiangs.push({value: 5, name: '南'});
                      break;
                    case '6':
                      fengxiangs.push({value: 6, name: '西南'});
                      break;
                    case '7':
                      fengxiangs.push({value: 7, name: '西'});
                      break;
                    default:
                      fengxiangs.push({value: 8, name: '西北'});
                  }
                });
                console.log("times:", times);
                console.log("fengxiangs :", fengxiangs);
                this.option5.xAxis.data = times.splice(-5);
                this.option5.series[0].data = fengxiangs.splice(-5);
                // 3. 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('direction'))
                myChart.setOption(this.option5);
              }

            });
          },
          creatSoil() {
            this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=6", null, r => {
              if (r.data.data.length == 0) {
                this.temp6 = false;

              } else {
                this.temp6 = true;
                console.log("土壤湿度:", r);
                let times = [];//日期数组
                let soils = [];//土壤湿度数组
                r.data.data.forEach(function (v, i) {
                  soils.push(parseInt(parseFloat(v.sources) * 100));
                  times.push(v.create_date.slice(5, 10).replace("-", "/"));
                });
                // console.log("times:",times);
                // console.log("soils:",soils);
                this.option6.xAxis.data = times.splice(-5);
                this.option6.series[0].data = soils.splice(-5);
                // 3. 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('soil'))
                myChart.setOption(this.option6);

              }

            });
          },
          creatLight() {
            this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=8", null, r => {
              if (r.data.data.length == 0) {
                this.temp7 = false;
              } else {
                this.temp7 = true;
                console.log("光照：", r);
                let times = [];//日期数组
                let lights = [];//光照数组
                r.data.data.forEach(function (v, i) {
                  lights.push(parseInt(parseInt(v.sources)));
                  times.push(v.create_date.slice(5, 10).replace("-", "/"));
                });
                // console.log("times:",times);
                // console.log("lights:",lights);
                this.option7.xAxis.data = times.splice(-5);
                this.option7.series[0].data = lights.splice(-5);
                // 3. 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('light'));
                myChart.setOption(this.option7);

              }

            });

          },

          goBack() {
            this.$router.go(-1);
          },
        },
    }
</script>

<style scoped>
  .mains {
    padding-top: .2rem;
    background: #f3f3f3;
    padding-bottom: .2rem;
  }
  .charts {
    padding: 10px;
  }

  .hidden {
    display: none !important;
  }
  .video_box {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    padding: 15px 5px;
  }
  .textfz{
    padding-top: 30px;
    display: flex;
    flex: 1;
    font-size: .32rem;
    justify-content: center;
  }
</style>
